<template>
	<view class="edit-wrap page-bg">
		<view class="page-head" @click="setAvatar">
			<image class="user-avatar" :src="avatar | avatar" mode=""></image>
			<view class="user-op">点击更换头像</view>
		</view>
		<view class="form-wrap">
			<view class="form-group">
				<view class="form-group__title">昵称</view>
				<view class="form-group__con">
					<input class="form-group__from" v-model="nickName" type="text" placeholder="未填写" placeholder-class="placeholder" />
				</view>
			</view>
			<view class="form-group">
				<view class="form-group__title">性别</view>
				<view class="form-group__con">
					<picker class="form-group__from link" mode="selector" :range="range" @change="pickerChange">
						<view class="picker-res">{{pickerRes}}</view>
					</picker>
				</view>
			</view>
		</view>
		
		<view class="circular-submit" @click="formSubmit">保存</view>
	</view>
</template>

<script>
	import common from '../../utils/common.js'
	import { api } from '../../utils/api.js'
	export default{
		data() {
			return{
				avatar: '',
				userInfo: {},
				nickName: '',
				userSex: '3', // 保密
				range: [],
				pickerRes: ''
			}
		},
		onLoad() {
			let userInfo = common.getUserInfo()
			this.avatar = userInfo.avatar
			this.nickName = userInfo.nickName
			this.userSex = userInfo.userSex - 1
			this.range = common.userSexArr
			this.pickerRes = common.userSexArr[this.userSex]
		},
		methods:{
			setAvatar() {
				common.imgUpload(imgPath => {
					console.log(imgPath)
				})
			},
			pickerChange(res) {
				this.userSex = res.detail.value
				this.pickerRes = common.userSexArr[this.userSex]
			},
			formSubmit() {
				let { avatar, nickName, userSex } = this.$data
				userSex = parseInt(userSex) + 1
				if(!avatar) { this.$showToast('请上传头像~'); return }
				if(!nickName) { this.$showToast('请天下昵称~'); return }
			
				api.realNameAuth({ avatar, nickName, userSex }, () => {
					this.$showToast('信息修改成功~')
					// 更新用户信息
					common.updateUserInfo(avatar, avatar)
					common.updateUserInfo(nickName, nickName)
					common.updateUserInfo(userSex, userSex)
				})
			}
		}
	}
	
</script>

<style scoped lang="less">
	@import url('../../app.less');
	.edit-wrap{
		.content-20;
	}
	.page-head{
		.flex-base;
		padding-top: 60rpx;
		flex-direction: column;
		justify-content: center;
	}
	.user-avatar{
		width: 150rpx;
		height: 150rpx;
		border: 1px solid @f;
		border-radius: 100%;
	}
	.form-wrap{
		.br;
	}
	
	.user-op{
		.f28;
		margin-top: 20rpx;
		margin-bottom: 50rpx;
	}
	.circular-submit{
		margin-top: 50rpx;
		background-color: @font-orange-color;
	}
</style>
